<template>
  <!-- 主容器，支持暗黑模式 -->
  <view class="news-container" :class="{ dark: isDark }">
    <!-- 自定义导航栏 -->
    <view class="nav-bar">
      <!-- 返回按钮 -->
      <view class="nav-back" @click="goBack"><</view>
      <!-- 页面标题 -->
      <view class="nav-title">消息</view>
    </view>

    <!-- 消息列表 -->
    <view
      class="news-item"
      v-for="item in messages"
      :key="item.id"
      @click="goToDetail(item)"
    >
      <!-- 左侧图标区域 -->
      <view class="item-left">
        <!-- 根据消息级别显示不同图标 -->
        <image
          class="level-icon"
          :src="getLevelIcon(item.level)"
          mode="aspectFit"
        />
      </view>
      
      <!-- 右侧内容区域 -->
      <view class="item-right">
        <!-- 消息标题 -->
        <view class="news-title">{{ item.title || '无标题' }}</view>
        <!-- 消息内容预览 -->
        <view class="news-content">{{ item.content || '无内容' }}</view>
      </view>
    </view>
  </view>
</template>
<script>
import request from '@/api/request.js'

export default {
  data() {
    return {
      messages: [],     // 消息列表数据
      email: '15324333161@163.com', // 用户邮箱
      isDark: false     // 是否暗黑模式
    }
  },
  
  // 页面加载生命周期
  onLoad() {
    this.fetchMessages() // 加载消息数据
  },
  
  // 页面显示生命周期
  onShow() {
    // 获取全局暗黑模式设置
    const dark = getApp().globalData.darkMode;
    this.isDark = dark;
  
    // 根据暗黑模式设置界面样式
    if (dark) {
      // 暗黑模式下的样式设置
      uni.setTabBarStyle({
        backgroundColor: '#1e1e1e',
        borderStyle: 'black',
        color: '#999999',
        selectedColor: '#ffffff'
      });
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#1e1e1e'
      });
    } else {
      // 明亮模式下的样式设置
      uni.setTabBarStyle({
        backgroundColor: '#ffffff',
        borderStyle: 'black',
        color: '#7A7E83',
        selectedColor: '#fb7e29'
      });
      uni.setNavigationBarColor({
        frontColor: '#000000',
        backgroundColor: '#F8F8F8'
      });
    }
  },
  
  // 方法定义
  methods: {
    /**
     * 返回上一页
     */
    goBack() {
      uni.switchTab({
        url: '/pages/AppCenter/AppCenter'
      })
    },
    
    /**
     * 获取消息级别对应的图标
     * @param {string} level - 消息级别
     * @returns {string} 图标路径
     */
    getLevelIcon(level) {
      try {
        return `/static/${level}.png`
      } catch (e) {
        return ''
      }
    },
    
    /**
     * 从服务器获取消息列表
     */
    fetchMessages() {
      request.get(`/newList/${this.email}`)
      .then(res => {
        console.log('获取消息成功：', res);
        
        // 请求成功处理
        if (res.data.code === 1) {
          this.messages = res.data.data || []; // 更新消息列表
        } else {
          // 获取失败提示
          uni.showToast({
            title: res.data.msg || '获取失败',
            icon: 'none'
          });
        }
      })
      .catch(err => {
        console.error('获取消息失败:', err);
        // 网络错误提示
        uni.showToast({
          title: '获取消息失败',
          icon: 'none'
        });
      });
    },

    /**
     * 跳转到消息详情页面
     * @param {Object} item - 消息对象
     */
    goToDetail(item) {
      uni.navigateTo({
        url: `/pages/MessageDetail/MessageDetail?email=${this.email}&level=${item.level}`
      })
    }
  }
}
</script>
<style lang="scss">
// 导入全局样式
@import "@/common/page-style.scss";

/* 主容器样式 */
.news-container {
  background: #f5f5f5;
  min-height: 100vh;

  /* 暗黑模式样式 */
  &.dark {
    background: #121212;
  }
}

/* 导航栏样式 */
.nav-bar {
  background: #ffffff;
  display: flex;
  align-items: center;
  font-size: 32rpx;
  font-weight: bold;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);

  /* 返回按钮样式 */
  .nav-back {
    margin-right: 20rpx;
    font-size: 36rpx;
    color: #333; // 日间颜色
  }

  /* 标题样式 */
  .nav-title {
    color: #333; // 日间颜色
  }
}

/* 暗黑模式导航栏样式 */
.news-container.dark .nav-bar {
  background: #1e1e1e;
  box-shadow: none;

  .nav-back {
    color: #fff; // 夜间颜色
  }

  .nav-title {
    color: #fff; // 夜间颜色
  }
}

/* 消息列表项样式 */
.news-item {
  background: #ffffff;
  padding: 20rpx;
  margin: 20rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: row;
  align-items: center;
  transition: background 0.3s;
}

/* 暗黑模式消息项样式 */
.news-container.dark .news-item {
  background: #1e1e1e;
  box-shadow: none;
}

/* 左侧图标区域样式 */
.item-left {
  margin-right: 20rpx;
}

/* 消息级别图标样式 */
.level-icon {
  width: 48rpx;
  height: 48rpx;
}

/* 右侧内容区域样式 */
.item-right {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 消息标题样式 */
.news-title {
  font-weight: bold;
  font-size: 32rpx;
  color: #333;
  margin-bottom: 10rpx;
}

/* 暗黑模式标题样式 */
.news-container.dark .news-title {
  color: #ffffff;
}

/* 消息内容样式 */
.news-content {
  font-size: 28rpx;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 2; // 限制显示2行
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; // 超出显示省略号
  word-break: break-all;
}

/* 暗黑模式内容样式 */
.news-container.dark .news-content {
  color: #aaaaaa;
}
</style>